<template>
  <div class="brand-box">

    <!--<div class="brand-list">-->
      <!--<div class="sub-tt" id="A">A</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="sub-tt" id="B">B</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="sub-tt" id="C">C</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="sub-tt" id="D">D</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="sub-tt" id="E">E</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
      <!--<div class="list clearfix">-->
        <!--<div class="fl">-->
          <!--<img src="../../assets/sale/a1.png" alt="">-->
        <!--</div>-->
        <!--<div class="fc">爱彼-Audermars-Piguet</div>-->
      <!--</div>-->
    <!--</div>-->

    <div class="brand-list">
      <div v-for="(brand,index) in brandList">

        <div class="sub-tt" :id="index">{{index}}</div>

        <div class="list clearfix" v-for="item in brand" v-on:click="selectBrand(item.manufacturer_id,item.name)">
          <div class="fl">
            <img :src="item.image" alt="">
          </div>
          <div class="fc word" v-html="item.name"></div>
        </div>
      </div>
    </div>

    <div class="brand-tap">
      <ul class="tap">
        <li v-for="(item,index) in brandList"><a href="javascript:;" v-on:click="myScrollTo(index)">{{index}}</a></li>
        <!--<li><a href="javascript:;" v-on:click="myScrollTo('A')">A</a></li>-->
        <!--<li><a href="javascript:;" v-on:click="myScrollTo('B')">B</a></li>-->
        <!--<li><a href="javascript:;" v-on:click="myScrollTo('C')">C</a></li>-->
        <!--<li><a href="javascript:;" v-on:click="myScrollTo('D')">D</a></li>-->
        <!--<li><a href="javascript:;" v-on:click="myScrollTo('E')">E</a></li>-->
      </ul>
    </div>


  </div>
</template>


<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'Brand',
    data () {
      return {
        brandList:{}
      }
    },
    methods: {
      myScrollTo:function(id){
//        alert(id)
//        alert($('#'+id).offset().top)
        var top = $('#'+id).offset().top;
        $('body').scrollTop(top);
      },
      selectBrand:function(manufacturer_id,manufacturer_name){
        var saleData = {};
        var manufacturerData = {};
        manufacturerData.manufacturer_id = manufacturer_id;
        manufacturerData.manufacturer_name = manufacturer_name;
        if(sessionStorage.getItem('saleData')){
          saleData = JSON.parse(sessionStorage.getItem('saleData'))
        }
        $.extend(saleData,manufacturerData)

        sessionStorage.setItem('saleData',JSON.stringify(saleData));
        this.$router.push('/sale')
      }
    },
    mounted:function(){
      var _this = this;
      setTimeout(function(){

        $.ajax({
          type:'post',
          url: RouteMap.brandList,
          success:function(res){
            if(res.code == 200){

              _this.brandList = res.data;

            }
            else{
              //Toast(res.msg)
            }
          }
        })
      })




    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .brand-box{

  }
  .brand-tap{
    position: fixed;
    right: 0.15rem;
    top:2rem;
  }
  .brand-list{
    padding-right: 0.8rem;
  }
  .sub-tt{
    background: #f3f3f3;
    color: #333333;
    font-weight: bold;
    padding-left: 0.8rem;
  }
  .list{

    padding: 0.8rem;
    color: #707070;
    border-bottom: 1px solid #e6e6e6;
  }
  .list .fl{
    width: 2.5rem;
    margin-right: 0.5rem;

  }
  .list .fl img{
    width: 100%;

  }
  .list .fc{
    margin-top: 0.3rem;
  }
  .list .word{
    width:10.2rem;
    line-height: 1rem;
  }
</style>
